<template>
  <div>
    <quarter-picker
      width="150px"
      format="yyyy年q季度"
      value-format="yyyyMM"
      placeholder="选择季度"
      v-model="quarterDate"
      :disabled-date="disabledQuarter"
      @change="handleChangeQuarter" />
  </div>
</template>

<script>
import QuarterPicker from '@/components/quarter-picker'
export default {
  components: {
    QuarterPicker
  },
  data() {
    return {
      quarterDate: '202104',
      // 禁用日期/季度示例，只允许选择本年度本季度（不含）之前的季度
      disabledQuarter: time => {
        const now = new Date()
        return time.getFullYear() > now.getFullYear() || time.getFullYear() === now.getFullYear() && parseInt(time.getMonth() / 3) >= parseInt(now.getMonth() / 3)
      }
    }
  },
  methods: {
    handleChangeQuarter(date) {
      console.info(date)
    }
  }
}
</script>